#include("../common/header.html")
<link rel="stylesheet" type="text/css" href="#(ctxWapSt)/js/address/style.css"/>
<link rel="stylesheet" type="text/css" href="#(ctxWapSt)/js/address/area.css"/>
<body>
<div id="container" style="background:#F7F7F7;">
	#for(addr : wechatMemberAddrList)
	<div class="address">
		<div class="addresstop">	
			<div>#(addr.realName)，#(addr.mobile)</div>
			<div>#(addr.addrArea) #(addr.addrDetail)</div>
		</div>
		<div class="between editaddress">
			#if(addr.status==2)
			<div class="addressleft flex">
				<img class="change" data-id="#(addr.id)" src="#(ctxWapSt)/h5css/images/sel.png">
				<span class="change" data-id="#(addr.id)">已设为默认</span>
			</div>
			#else
			<div class="addressleft flex">
				<img class="change" data-id="#(addr.id)" src="#(ctxWapSt)/h5css/images/select.png">
				<span class="change" data-id="#(addr.id)" style="color:#A5A5A5">设为默认</span>
			</div>
			#end
			<div class="addressright flex">
				<div class="edit_address flex">
					<img src="#(ctxWapSt)/h5css/images/edit.png">
					<div class="edit" data-id="#(addr.id)" data-user="#(addr.realName)" data-mobile="#(addr.mobile)" data-area="#(addr.addrArea)" data-detail="#(addr.addrDetail)">编辑</div>
				</div>
				<div class="edit_address flex">
					<img src="#(ctxWapSt)/h5css/images/del.png">
					<div class="delete" data-id="#(addr.id)">删除</div>
				</div>
			</div>
		</div>
	</div>
	#end
	
	<div class="addressbottom">
		<div class="addaddress flex">
			<img src="#(ctxWapSt)/h5css/images/add.png">
			<span>手动添加</span>
		</div>
	</div>
</div>

<div class="addressshadow"></div>
<form class="addressform">
	<img class="close" src="#(ctxWapSt)/h5css/images/close.png"></img>
	<div class="addesstitle">添加收货地址</div>
	<input type="hidden" name="id">
	<div class="addressitem flex" >
		<span>联系人</span>
		<input type="text" placeholder="请填写您的名字" name="realName">
	</div>
	<div class="addressitem flex" >
		<span>手机号码</span>
		<input type="number" placeholder="请填写您的手机号" name="mobile">
	</div>
	<div class="addressitem flex " >
		<span>选择地区</span>
		<input id="expressArea" data-name="custUa" name="area" data-required="true" data-label="单位地址" placeholder="选择省市区" readonly style="padding-left:0;"/>
	</div>
	<div class="addressitem flex">
		<span>详细地址</span>
		<input type="text" placeholder="请填写您的详细地址" name="detail">
	</div>
	<div class="saveaddress">保存</div>
</form>
<div class="ui-form-item ui-border-b">
	<div class="browser">
		<!--选择地区弹层-->
		<section id="areaLayer" class="express-area-box">
			<header>
				<!-- <h3>选择省市区</h3> -->
				<div class="selet-area-wrap">
					<p><span class="one"></span></p>
					<p><span class="two"></span></p>
					<p><span class="three"></span></p>
				</div>
				<div class="hot-city">
					<p>热门城市</p>
					<ul>
						<li onClick="selectPP(0,1)">北京</li>
						<li onClick="selectPP(10,1)">上海</li>
						<li onClick="quickselectC(18,0)">广州</li>
						<li onClick="quickselectC(18,1)">深圳</li>
					</ul>
					<p>选择省份/地区</p>
				</div>
			</header>
			<article id="areaBox">
				<ul id="areaList" class="area-list"></ul>
			</article>
		</section>
		<!--遮罩层-->
		<div id="areaMask" class="mask"></div>
	</div>
</div>
</body>

<script src="#(ctxWapSt)/js/address/jquery.area.js" type="text/javascript"></script>
<script type="text/javascript">

    $(document)[0].title="收货地址";
	$(".addaddress").click(function(){
		$(".addressshadow").css("display","block")
		$(".addressform").css("display","block")
		$('input[name="id"]').val('')
		$('input[name="realName"]').attr('value','');
		$('input[name="mobile"]').attr('value','');
		$('input[name="area"]').attr('value','');
		$('input[name="detail"]').attr('value','');
	})

	$(".close").click(function(){
		$(".addressform").css("display","none")
		$(".addressshadow").css("display","none")
	})
	$(".edit").click(function(){
		$(".addressshadow").css("display","block")
		$(".addressform").css("display","block")

		$('input[name="id"]').attr('value',$(this).attr('data-id'));
		$('input[name="realName"]').attr('value',$(this).attr('data-user'));
		$('input[name="mobile"]').attr('value',$(this).attr('data-mobile'));
		$('input[name="area"]').attr('value',$(this).attr('data-area'))
		$('input[name="detail"]').attr('value',$(this).attr('data-detail'))
	})

	$(".saveaddress").click(function(){
		var id = $('input[name="id"]').val();
		var realName = $('input[name="realName"]').val();
		var mobile   = $('input[name="mobile"]').val();
		var address  = $('input[name="area"]').val()+','+$('input[name="detail"]').val();
		$.ajax({
			type: "GET",
			url: "#(ctx)/wap/member/addr/save",
			data: {id:id,realName:realName,mobile:mobile,address:address},
			dataType: "json",
			success: function(data){
				layer.msg(data.msg);
				location.reload();
			}
		});
	})
	$(".change").click(function(){
		var id = $(this).attr('data-id');
		$.ajax({
			type: "GET",
			url: "#(ctx)/wap/member/addr/defaultAddr",
			data: {id:id},
			dataType: "json",
			success: function(data){
				layer.msg(data.msg);
				location.reload();
			}
		});
	})
	$(".delete").click(function(){
		var id = $(this).attr('data-id');
		$.ajax({
			type: "GET",
			url: "#(ctx)/wap/member/addr/delete",
			data: {id:id},
			dataType: "json",
			success: function(data){
				layer.msg(data.msg);
				location.reload();
			}
		});
	})

</script>